<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no">
  <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
  <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
  <meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
  <meta HTTP-EQUIV="expires" CONTENT="0">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/checkInput.css">
  <title>订单兑付</title>
  <style media="screen">
    body {
      background-color: #f4f4f4;
      font-size: 0.2rem;
    }

    [v-cloak] {
      display: none !important;
    }
  </style>
</head>

<body>
  <div class="loadingBack  uhide">
    <div id="loading" class="loading">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="page-order-pay" id="detail">
    <div class="op-tit clearfix" v-cloak>
      <div class="op-tit-cont fl" :class="{current:pageTab==false}" @click="changeTab()">
        未兑
      </div>
      <div class="op-tit-cont fl" :class="{current:pageTab==true}" @click="changeTab()">
        已兑
      </div>
    </div>
    <div class="op-tips" v-cloak>
      <span v-if="pageTab==false">未兑订单数：
        <span class="ftred">{{noCount}}</span>笔&nbsp;&nbsp;&nbsp;&nbsp;未兑订单金额：
        <span class="ftred">{{noSumPrice}}</span>元</span>
      <span v-else>已兑订单数：
        <span class="ftred">{{count}}</span>笔&nbsp;&nbsp;&nbsp;&nbsp;兑换订单金额：
        <span class="ftred">{{sumPrice}}</span>元</span>
    </div>

    <!--未兑start-->
    <div  class="op-list"  :class="{btm:(pageTab==true||(pageTab==false&&isShowExchange===0))}">
      <div style="width: 0.5rem;height: 0.01rem;"></div>
      <template v-if="pageTab==false" v-cloak>
        <ul v-for="(obj,j) in noExchangeArr" style="margin-bottom:0.1rem">
          <li style="color: #666">{{obj.name}}</li>
          <li class="clearfix checkbox2" v-for="(item,index) in obj.list">
            <span class="wd-list1 fl" v-if="isShowExchange===1">
              <input type='checkbox' :id="'checkbox'+j+'A'+index" name='checkboox' @change="computePrice(item,index,$event)" v-model=item.isChecked>
              <label :for="'checkbox'+j+'A'+index"></label>
            </span>
            <span class="wd-list2 fl">
              <span class="testID">{{index+1}}、下单金额：</span>
            </span>
            <span class="wd-list3 fl">
              <span class="orange-ft">{{item.memberPrice||0}}</span>
              <span>元</span>
            </span>
            <span class="wd-list4 fl">
            </span>
          </li>
        </ul>
      </template>
      <!--未兑end-->

      <!--已兑start-->
      <template v-else="pageTab==true" v-cloak>
        <ul v-for="(obj,j) in exchangeArr" style="margin-bottom:0.1rem">
          <li style="color: #666">{{obj.name}}</li>
          <li class="clearfix" v-for="(item2,index2) in obj.list">
            <span class="wd-list2 fl">
              <span>{{index2+1}}、下单金额：</span>
            </span>
            <span class="wd-list3 fl">
              <span class="orange-ft">{{item2.memberPrice||0}}</span>
              <span>元</span>
            </span>
            <span class="wd-list4 fl">
            </span>
          </li>
        </ul>
      </template>
    </div>
    <!--已兑end-->


    <div class="op-foot" v-if="pageTab==false&&isShowExchange===1" v-cloak style="line-height: normal!important;">
      <div class="fl checkbox2" style="height: 1.5rem;">
        <span style="display: inline-block;">
          <input type='checkbox' id="checkAll" name='checkbooxAll' v-model="isAllChecked" @change="checkAll($event)">
          <label for="checkAll"></label>
        </span>
      </div>
      <span style="line-height: 1.5rem;margin-left:1rem" class="fl">
        全选
      </span>

      <div class="fr all-exchange" @click="orderConvert(null,true)">
        兑换
      </div>
      <div class="fl wd-fixed" style="height: 1.5rem;line-height: 0.4rem;margin-left: 1.6rem;padding-top: 0.3rem">
        <p>
          <span>已选</span>
          <span class="ftred">{{checkedNum}}</span>
          <span>笔订单</span>
        </p>
        <p>
          <span>合计</span>
          <span class="orange-ft">{{orderSum||0}}</span>
          <span>元</span>
        </p>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    !function () {
      var ua = navigator.userAgent.toLowerCase();
      if (/iphone|ipad|ipod/.test(ua)) {
        var sc = 1 / window.devicePixelRatio;
        document.getElementsByName('viewport')[0].content = 'initial-scale=' + sc + ', maximum-scale=' + sc + ', minimum-scale=' + sc + ', user-scalable=no';
      }
      var pxUnit = 100;
      var designWid = 750;
      var winWid = document.body.clientWidth;
      var winHei = document.body.clientHeight;
      var bl = winWid / designWid;
      document.querySelector('html').style.fontSize = (bl * pxUnit) + 'px';
    }();
  </script>
</body>
<script src="js/vue.min.js"></script>
<!--<script src="js/vue-resource.min.js"></script>-->
<script src="js/zepto.min.js"></script>
<script src="js/common.js"></script>
<script src="js/Number.js"></script>
<script>
    (function () {
        if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
            handleFontSize();
        } else {
            if (document.addEventListener) {
                document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
            } else if (document.attachEvent) {
                document.attachEvent("WeixinJSBridgeReady", handleFontSize);
                document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
            }
        }

        function handleFontSize() {
            // 设置网页字体为默认大小
            WeixinJSBridge.invoke('setFontSizeCallback', {
                'fontSize': 0
            });
            // 重写设置网页字体大小的事件
            WeixinJSBridge.on('menu:setfont', function () {
                WeixinJSBridge.invoke('setFontSizeCallback', {
                    'fontSize': 0
                });
            });
        }
    })();
</script>

<script>
  var clickedFlag = 0;//防止过快点击按钮
  var app = new Vue({
    el: '#detail',
    data: {
      noExchangeArr: [],//未兑订单
      exchangeArr: [],//已兑订单
      pageTab: false,//false为未兑，true为已兑
      count: 0,
      noCount: 0,

      noSumPrice: 0,
      sumPrice: 0,
      openId: '',
      fairsInfoId: '',

      isShowExchange: 0,//是否显示兑换功能

      //选择事件相关
      orderSum: 0,//界面选中的合计额
    },
    mounted: function () {
      var user = JSON.parse(localStorage.getItem('signUserInfo') || '{}');
      this.openId = user.openId;
      this.fairsInfoId = localStorage.getItem('SignWebFairsInfoId');
      if (this.openId && this.fairsInfoId) {
        this.getAllDetail();
      }
    },
    computed: {
      checkedOrderIds: function () {
        var ids = '';
        this.noExchangeArr.forEach(function (element) {
          element.list.forEach(function (item) {
            if (item.isChecked === true) {
              ids += item.orderId + ','
            }
          });
        });
        return ids;
      },
      isAllChecked: function () {
        var sum = parseFloat(this.orderSum);
        var sumAll = parseFloat(this.noSumPrice);
        return sum && sum == sumAll;
      },
      checkedNum: function () {
        var num = 0;
        this.noExchangeArr.forEach(function (element) {
          element.list.forEach(function (item) {
            if (item.isChecked === true) {
              num++;
            }
          });
        });
        return num;
      }
    },
    methods: {
      //获取所有订单
      getAllDetail: function () {
        this.getOrderDetail();
      },

      getOrderDetail: function () {
        var data = {
          openId: this.openId,
          custName: localStorage.getItem('custName'),
          isLevelTwo:localStorage.getItem('isLevelTwo'),
          danwBh: localStorage.getItem('danwBh'),
          danwNm:localStorage.getItem('danwNm')
        };
        vueRequest('/cust/sign/orderCenterDetail', data, this, function (result, that) {

          console.log(result);
          that.orderSum = 0;
          that.noSumPrice = result.noSumPrice || 0;
          that.sumPrice = result.sumPrice || 0;
          that.count = result.count || 0;
          that.noCount = result.noCount || 0;
          that.isShowExchange = result.isShowExchange;
          that.noExchangeArr = [];
          for (var key in result.noExchangeMap) {
            var list = result.noExchangeMap[key];
            list.map(function (item, index) {
              item.isChecked = false;
            });
            that.noExchangeArr.push({
              name: key,
              list: list
            });
          }
          that.exchangeArr = [];
          for (var key2 in result.exchangeMap) {
            var list2 = result.exchangeMap[key2];
            that.exchangeArr.push({
              name: key2,
              list: list2
            });
          }

          if (that.noExchangeArr.length == 0 && that.exchangeArr.length == 0 && result.msg) {
            Toast(result.msg);
          }
        });
      },

      computePrice: function (item, index, e) {
        if (e.target.checked) {
          this.orderSum = Number.FloatAdd(this.orderSum, item.memberPrice);
        } else {
          this.orderSum = Number.FloatSubt(this.orderSum, item.memberPrice);
        }
      },
      checkAll: function (e) {
        if (e.target.checked) {
          this.orderSum = this.noSumPrice;
          this.noExchangeArr.forEach(function (element) {
            element.list.forEach(function (item) {
              item.isChecked = true;
            });
          });
        } else {
          this.orderSum = 0;
          this.noExchangeArr.forEach(function (element) {
            element.list.forEach(function (item) {
              item.isChecked = false;
            });
          });
        }
      },
      orderConvert: function (item, isAllConvert) {
        if (clickedFlag == 1) {
          return;
        }
        setTimeout(function () {
          clickedFlag = 0;
        }, 1000);
        clickedFlag = 1;
        var orderIds = '';
        if (item && item.orderId) {
          orderIds = item.orderId;
        } else if (isAllConvert) {
          orderIds = this.checkedOrderIds;
          if (!orderIds) {
            Toast('请选择要兑换的订单');
            return;
          }
        }
        vueRequest('/cust/sign/orderConvert', {
          openId: this.openId,
          orderIds: orderIds
        }, this, function (result, that) {
          Toast(result.msg);
          that.getAllDetail();
        });
        console.log('即将兑换的订单号：' + orderIds);
      },
      changeTab: function () {
        this.pageTab = !this.pageTab;
        if (this.pageTab == false) {
          setTimeout(function () {
            var len = $('.testID').length;

          }, 1000);

        }
      }
    }
  })

</script>

</html>